<template>
  <div class="batch">
    <!--<div class="head">-->
      <!--<x-header :left-options="{showBack: false}">批量捐</x-header>-->
    <!--</div>-->
    <div class="title-list">
       <ul>
         <li @click="tabChange('quanbu')"><span :class="{'onactive': quanbu}">全部</span></li>
         <li @click="tabChange('zhukun')"><span :class="{'onactive': zhukun}">助困</span></li>
         <li @click="tabChange('zhuxue')"><span :class="{'onactive': zhuxue}">助学</span></li>
         <li @click="tabChange('zhuyi')"><span :class="{'onactive': zhuyi}">助医</span></li>
         <li @click="tabChange('qita')"><span :class="{'onactive': qita}">其他</span></li>
       </ul>
    </div>
    <scroller lock-x height="444px" :use-pullup='use_pullup' :pullup-config="pullup_con" @on-pullup-loading="onScrollBottom" ref="scroller" :scroll-bottom-offst="200">
      <div class="home-tab">
        <div>
          <flexbox v-for="(eventLists, index) in eventList">
            <flexbox-item :span="1">
              <div @click="Checked(index)" class="flex-demo" style="line-height: 64px;text-align: center;">
                <check-icon :value.sync="eventList[index].ifChecked" type="plain"></check-icon>
              </div>
            </flexbox-item>
            <flexbox-item :span="4">
              <div class="flex-demo">
                <img :src="imageUrl.imageUrl + eventLists.eventPicUrl"/>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="flex-demo">
                <p v-html="eventLists.eventName"></p>
                <x-progress :percent="eventLists.schedule" :show-cancel="false"></x-progress>
                <span class="precess-right">{{eventLists.schedule}}%</span>
                <div class="project-foot">
                  <span class="project-foot-left">目标<span class="content-red">{{eventLists.eventGoalAmount}}</span>元</span>
                  <span class="project-foot-left">参加<span class="content-red">{{eventLists.attendPeople}}</span>人次</span>
                </div>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
        <load-more :tip="tipText" :show-loading="show_loading"></load-more>
      </div>
    </scroller>

    <div class="dialog-countmoney">
      <div class="dialog-coun">

         <p><check-icon :value.sync="allChecked" type="plain"></check-icon>
           全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 单个项目捐助：<input v-model="oneDonation" placeholder="100"/>元</p>
         <p class="money-count">
         <span class="countmoney-left">已选项目：<label v-model="selectedItems">{{selectedItems}}</label>个</span>
         <span class="countmoney-right">捐助金额：<label v-model="allDonation">{{allDonation}}</label>元</span>
         </p>
         <p class="money-donation">
            <!--<i class="iconfont batch-list-left">&#xe647;</i>-->
           <!--<check-icon :value.sync="allChecked" type="plain"></check-icon>-->
            <!--全选-->
           <span @click="isagree">
            <i v-show="agree == true" class="iconfont batch-list-left">&#xe620;</i>
            <i v-show="agree == false" class="iconfont batch-list-left">&#xe647;</i>
          </span>
           已阅读并同意
           <a>青援筹捐款协议</a>
            <button @click="wantDonate">我要捐助</button>
          </p>
        </div>
      <!--<p class="agreement">-->
          <!--<span @click="isagree">-->
            <!--<i v-show="agree == true" class="iconfont batch-list-left">&#xe620;</i>-->
            <!--<i v-show="agree == false" class="iconfont batch-list-left">&#xe647;</i>-->
          <!--</span>-->
        <!--已阅读并同意-->
        <!--<a>亲青筹捐款协议</a>-->
      <!--</p>-->
    </div>
    <nav-bottom></nav-bottom>
  </div>
</template>

<script src="./batch.js"></script>
